<template>
    <view class="app-list">
      <view class="app-item" @click="navigateTo('alarm')">
        <image class="app-icon" src="@/static/images/nav/alarm.png"></image>
        <text class="app-text">报警中心</text>
      </view>
      <view class="app-item" @click="navigateTo('device')">
        <image class="app-icon" src="@/static/images/nav/device.png"></image>
        <text class="app-text">设备数据</text>
      </view>
      <view class="app-item" @click="navigateTo('project')">
        <image class="app-icon" src="@/static/images/nav/project.png"></image>
        <text class="app-text">项目管理</text>
      </view>
      <view class="app-item" @click="navigateTo('config')">
        <image class="app-icon" src="@/static/images/nav/config.png"></image>
        <text class="app-text">组态</text>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      navigateTo(page) {
        switch (page) {
          case 'alarm':
            uni.navigateTo({ url: '/pages/alarm/index' });
            break;
          case 'device':
            uni.navigateTo({ url: '/pages/device/index' });
            break;
          case 'project':
            uni.navigateTo({ url: '/pages/project/index' });
            break;
          case 'config':
            uni.navigateTo({ url: '/pages/config/index' });
            break;
          default:
            break;
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .app-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
  }
  
  .app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    margin-bottom: 20px;
  }
  
  .app-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  
  .app-text {
    font-size: 16px;
    color: #333333;
    margin-top: 10px;
  }
  </style>